Design improvement for student, ta, and instructor tables#7557
Design improvement for student, ta, and instructor tables#7557david-yz-liu merged 7 commits intoMarkUsProject:masterfrom
Conversation
There was a problem hiding this comment.
Pull Request Overview
This pull request refines the visual design of the student, TA, and instructor tables when no rows are present by introducing a custom "no data" component and updating locale strings.
- Added locale entries for empty table messages
- Introduced a new React component for displaying "no data" messages
- Updated tables and tests to use the new component and locale keys
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| config/locales/views/users/en.yml | Added locale messages for empty tables |
| app/javascript/Components/table_no_data.jsx | Created a new component to render empty table messages |
| app/javascript/Components/ta_table.jsx | Updated table to use the new "no data" component |
| app/javascript/Components/student_table.jsx | Updated table to use the new "no data" component |
| app/javascript/Components/instructor_table.jsx | Updated table to use the new "no data" component |
| app/javascript/Components/tests/*.jsx | Updated tests to reflect new empty message texts |
| app/assets/stylesheets/common/core.scss | Added styling for the new "no data" component |
| Changelog.md | Documented the design improvements |
Comments suppressed due to low confidence (1)
app/javascript/Components/table_no_data.jsx:3
- [nitpick] Consider renaming 'tableNoDataComponent' to 'TableNoData' to follow React component naming conventions, which recommend using PascalCase for component names.
export const tableNoDataComponent = empty_table_message => {
…mprove-table-no-data-ui
Pull Request Test Coverage Report for Build 15466657172Details
💛 - Coveralls |
|
I think this is the default choice here and I am happy with the design. Please let me know if you have anything else in mind. |
david-yz-liu
left a comment
david-yz-liu
left a comment
There was a problem hiding this comment.
@ch-iv the styling is good. In terms of functionality, I would actually like you to change the behaviour for all uses of react table, not just these three tables.
To override the component in general, you can modify the react table defaults (see react_config.js). See also https://github.com/TanStack/table/tree/v6?tab=readme-ov-file#component-overrides.*
Note that the actual text of the component can be passed in with the noDataText prop. See also https://github.com/TanStack/table/blob/v6/src/index.js#L851.
To be clear, I'm not expecting you to write custom messages for every single table. You can leave the ones you've already written and just keep "No rows found" for the others.
*We're using an older version of react-table, v6. This is likely why you had a hard time finding documentation for the library; sorry, I should have warned you about that!
|
I made the custom no data component show for every react table. I also added some tests just for the new default options. |
|
@ch-iv this is good; please update the PR title and description so that it doesn't just focus on the student/TA/instructor tables. |
Fixes: #5920
TLDR:
Design improvement for student, ta, and instructor tables when the table is empty
Proposed Changes
Crate a custom component that is shown when the table does not have any rows to display. The message is no longer overplayed over the table header and is shown below it instead. Different custom messages are implement for different tables.
Screenshots
Widescreen:
Narrow:
With scroll bar enabled:
Type of Change
(Write an
Xor a brief description next to the type or types that best describe your changes.)Checklist
(Complete each of the following items for your pull request. Indicate that you have completed an item by changing the
[ ]into a[x]in the raw text, or by clicking on the checkbox in the rendered description on GitHub.)Before opening your pull request:
After opening your pull request: